<template>
  <sideslip ref="sideslip">
    <!-- <tabs :value="active" :data="['备选库','全部专业','适合我的']" @event="bindTabs"></tabs> -->
    <tabs :value="active" :data="['备选库','全部专业']" @event="bindTabs"></tabs>
    <table v-if="list.length > 0" cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <th class="name">专业名称</th>
          <th class="probability">录取概率</th>
          <th class="plan">招生计划</th>
          <th></th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td class="name">{{item.name || item.majorName}}</td>
          <td class="probability">
            <span class="active" :class="'block-tag--'+item.chongShouBao.id">{{item.chongShouBao.name}}{{item.probability || '-'}}%</span>
          </td>
          <td class="plan"><i class="c-blue">{{item.planCount||'-'}}</i>人</td>
          <td class="operation">
            <div v-if="!item.choose" @click="item.choose = add(item)">添加</div>
            <div class="c-ad" v-else>已添加</div>
          </td>
        </tr>
      </tbody>
    </table>
    <no-content v-else :text="text"></no-content>
    <paginate v-show="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
  </sideslip>
</template>
<script>
import { api } from '@/utils'
import tabs from '~/components/slot/tabs'
const COMPONENTS = {
  tabs
}
const URL = [{
  url: api.getFirstMajor,
  type: ''
}, {
  url: api.queryAllFirstMajor,
  type: 'all'
}, {
  url: api.queryAllFirstMajor,
  type: 'my'
}]
export default{
  components: COMPONENTS,
  data () {
    return {
      list: '',
      active: 0,
      params: {
        page: 0,
        size: 15
      },
      school: '',
      enrollBatch: '',
      number: '',
      totalElements: 0,
      page: 1,
      text: '加载中...'
    }
  },
  methods: {
    submitdata ({school, enrollBatch, number}) {
      this.reset()
      this.active = 0
      // 打开弹窗
      this.$refs.sideslip.$emit('event')

      this.enrollBatch = enrollBatch
      this.number = number
      this.school = school
      this.params.collegeId = school.college.id

      this.getData()
    },
    bindTabs (i) {
      this.active = i
      this.list = []
      this.totalElements = 0
      this.page = 1
      this.params.page = 0
      this.text = '加载中...'
      this.params.type = URL[i]['type']
      this.getData()
    },
    getData () {
      this.$axios.get(URL[this.active]['url'], { params: this.params }).then(data => {
        if (data && data.content.length) {
          this.list = data.content
          console.log('data', this.list)
        } else {
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(data => {
        this.text = '网络走丢了，请稍后重试！'
        this.reset()
      })
    },
    add (item) {
      console.log('item--', item)
      let _data = {
        wishCollegeId: this.school.id,
        majorId: item.id,
        serialNumber: this.number,
        chongShouBaoId: item.chongShouBao.id,
        probability: item.probability
      }

      this.$axios.post(api.setWishMajor, _data).then(data => {
        // 添加后关闭选择窗口
        this.$refs.sideslip.$emit('event', false)
        // 刷新数据
        this.$emit('bindevent')
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
      })
      // return true
    },
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData()
    },
    reset () {
      this.params.page = 0
      this.list = []
      this.totalElements = 0
      this.page = 1
    }
  },
  mounted: function () {
    // this.$on('submitdataa', function (msg) {
    //   console.log('监听成功', msg)
    // })
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-tabs__nav-scroll{
    padding:0 10px !important;
    .el-tabs__active-bar{
      width:48px;
    }
  }
  table{
    margin-top:0px !important;
    border:none !important;
    width:100%;
    tr{
      font-size:16px;
      th,td{
        font-weight:normal;
        border-top:none !important;
        border-bottom: 1px solid #E6E6E6;
        background-color: transparent !important;
      }
      th{
        color:#69707F;
        padding:20px 0px 12px !important;
      }
      td{
        padding: 12px 0px !important;
        color:#333;
      }
      .name{
        text-align:left;
        width:50%;
        overflow: hidden;
        padding-left:10px !important;
      }
      .probability{
        width:20%;
      }
      .plan{
        width:20%
      }
      .operation{
        width:10%;
        text-align:right;
        padding-right:10px !important;
        cursor:pointer;
        color: $positive;
      }
    }
  }
</style>
